<html>

<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
    .float {
        height: 100px;
        width: 100px;
        border: 1px red solid;
        float: left;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }

    .clearfix:after {
        clear: both;
    }
    </style>
</head>

<body>
    <h1>清除浮动</h1>
    <h2>清除浮动方法一</h2>
    <div class="float">浮动的盒子</div>
    <div class="float">浮动的盒子</div>
    <div style="clear:both;"></div>
    <p>浮动容器之后的内容</p>
    <h2>清除浮动方法二</h2>
    <div class="clearfix">
        <div class="float">浮动的盒子</div>
        <div class="float">浮动的盒子</div>
    </div>
    <p>浮动容器之后的内容</p>
</body>

</html>